<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            background-color: #f4f4f4;
        }

        .top {
            height: 400px;
            width: 100%;

        }

        .top>img {
            height: 50%;
            object-position: center;
            width: 100%;
        }

        .top>ul {
            height: 50%;
            width: 100%;
            overflow: hidden;
            background-color: #fff;
        }

        .top>ul>li {

            font-size: 13px;
            color: #797d82;
            margin: 10px 15px;
        }

        .top>ul>li:nth-child(1) {
            font-size: 20px;
            color: black;
        }

        .top>ul>li:nth-child(1)>span {
            height: 30px;
            width: 30px;
            font-size: 12px;
            background-color: #ccc;
            border-radius: 2px;
            text-align: center;
            color: white;
            /* display: inline-block; */
        }

        .top>ul>li:nth-child(5) {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
        }

        .middle {
            width: 100%;
            height: 170px;
            background-color: #fff;
            margin-top: 15px;
            white-space: nowrap;
            overflow-x: scroll;
        }

        .middle::-webkit-scrollbar {
            display: none;
        }


        .middle>div {
            width: 85px;
            height: 120px;
            background: rgb(249, 249, 249);
            opacity: 1;
            display: inline-block;
            margin-left: 6px;

        }

        .middle>div>img {
            width: 85px;
            height: 85px;

        }

        .middle>div>span {
            display: block;
            text-align: center;
        }

        .middle span {
            font-size: 12px;
            color: #191a1b;
        }

        .middle>div>span:last-child {
            font-size: 10px;
            color: #797d82;
        }

        .middle>span {
            display: block;
            margin: 10px 15px;
            font-size: 16px;
        }

        .buttom {
            width: 100%;
            height: 170px;
            background-color: #fff;
            margin-top: 15px;
            display: block;
            content: "";
            clear: both;

            /* overflow: hidden; */
        }

        .buttom>span {
            display: block;
            margin: 10px 15px;
            font-size: 16px;
        }

        .buttom>span:nth-child(2) {
            float: right;
            margin-top: -31px;
            font-size: 13px;
            color: #797d82;
        }

        .buttom>div {
            height: 90px;
            width: 100%;
            white-space: nowrap;
            overflow-x: scroll;
        }

        .buttom>div::-webkit-scrollbar {
            display: none;
        }

        .buttom>div>img {
            width: 150px;
            height: 85px;
            margin-left: 6px;
            /* display: inline-block; */
        }

        .buy {
            position: fixed;
            bottom: 0;
            left: 0;
            height: 49px;
            width: 100%;
            text-align: center;
            background-color: #ff5f16;
            color: #fff;
            font-size: 16px;
            line-height: 49px;
        }
    </style>
</head>

<body>
    <div id="big">
    </div>
    <div class="buy">选票购买</div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    let url = window.location.href
    let results = url.split('=')[1]
    console.log(results)
    let _url = `https://m.maizuo.com/gateway?filmId=${results}`
    axios.get(_url, {
        headers: {
            "X-Host": "mall.film-ticket.film.info"
        }
    }).then(res => {
        let data = res?.data?.data?.film
        console.log(data)
        let image = ''
        //获取当前时间加距离上映时间
        let time = Date.now() + data.premiereAt
        function _time(time) {
            let date = new Date(time)
            let year = date.getFullYear();
            let month = date.getMonth() + 1; // 注意月份是从0开始的，所以需要加1  
            let day = date.getDate();
            return `${year}-${addZero(month)}-${addZero(day)}`
        }
        //补零
        function addZero(date) {
            return date > 10 ? date : '0' + date
        }

        console.log(_time(time))
        image += `
        <div class="top">
            <img src="${data.poster}" alt="">
            <ul>
                <li>${data.name}<span>${data.filmType.name}</span></li>
                <li>${data.category}</li>
                <li>${_time(time)}上映</li>
                <li>${data.nation} | ${data.runtime}分钟</li>
                <li>
                    ${data.synopsis}
                </li>
            </ul>
        </div>
        <div class="middle">
            <span>演职人员</span>`


        for (let i = 0; i < data.actors.length; i++) {
            image += `<div><img src="${data.actors[i].avatarAddress}" alt=""><span>${data.actors[i].name}</span><span>${data.actors[i].role}</span></div>
            `
        }

        image +=
            ` </div>
        <div class="buttom">
            <span>剧照</span><span>全部(${data.photos.length})</span>
            <div>
            `
        for (let i = 0; i < data.photos.length; i++) {
            image += `<img src="${data.photos[i]}" alt="">`
        }
        image +=
            `
            </div>
        </div>
        `
        big.innerHTML = image
    })
</script>

</html>